<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="公共配置" name="1">
        <div class="pad-lft-rgt-10">
          <el-row :gutter="10" :span="12">
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">背景颜色</span>
                <PopoverColor :colorValue="widget.UI.data.backgroundColor">
                  <CustomColorPicker v-model="widget.UI.data.backgroundColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <!-- <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">组件颜色</span>
                <PopoverColor :colorValue="widget.UI.data.componentColor">
                  <CustomColorPicker v-model="widget.UI.data.componentColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col> -->
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">标题颜色</span>
                <PopoverColor :colorValue="widget.UI.data.textColor">
                  <CustomColorPicker v-model="widget.UI.data.textColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">内容颜色</span>
                <PopoverColor :colorValue="widget.UI.data.contentColor">
                  <CustomColorPicker v-model="widget.UI.data.contentColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">选中颜色</span>
                <PopoverColor :colorValue="widget.UI.data.activeColor">
                  <CustomColorPicker v-model="widget.UI.data.activeColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
          </el-row>
          <div class="flex-com mar-btm">
            <span class="label-title">缩放比例</span>
            <el-input v-model="widget.UI.data.scale" placeholder="房间缩放比例1:20" size="mini"></el-input>
          </div>
          <div class="flex-com align-start">
            <span class="label-title">默认图片</span>
            <el-popover width="300" trigger="click" popper-class="custom-popover">
              <div slot="reference" class="default-image-container">
                <el-image :src="dftImgSrc" class="default-image-value">
                  <div slot="error">
                    <span style="color:#2D69E0">请选择</span>
                  </div>
                </el-image>
              </div>
              <div class="pad-all">
                <ImagePicker v-model="widget.UI.data.backgroundImage"></ImagePicker>
              </div>
            </el-popover>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="特殊配置" name="2">
        <div class="pad-lft-rgt-10">
          <el-tabs v-model="widget.UI.data.camerasId" :addable="true" @edit="handleTabsVideo">
            <el-tab-pane v-for="(s, idx) in widget.UI.data.cameras" :key="s.id" :label="s.name" :name="s.id"
                         :closable="idx !== 0">
              <!--摄像头基本信息-->
              <div class="flex-com mar-btm">
                <span class="label-title">名称</span>
                <el-input v-model="s.name" placeholder="摄像头名称" size="mini"></el-input>
              </div>
              <div class="flex-com mar-btm">
                <span class="label-title">倒装</span>
                <el-select v-model="s.upsideDown" placeholder="请选择是否倒装" size="mini" class="width-100">
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </div>
              <div class="flex-com mar-btm">
                <span class="label-title">摄像ID</span>
                <el-input v-model="s.cameraNum" placeholder="摄像ID" size="mini"></el-input>
              </div>
              <div class="flex-com mar-btm">
                <span class="label-title">内容颜色</span>
                <PopoverColor :colorValue="s.micColor">
                  <CustomColorPicker v-model="s.micColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>

              <div class="flex-com mar-btm">
                <span class="label-title">高度</span>
                <el-input-number v-model="s.tall" placeholder="请设置高度" size="mini" class="width-100">
                </el-input-number>
              </div>
              <div class="flex-com mar-btm">
                <span class="label-title">上</span>
                <el-input-number v-model="s.position.top" placeholder="请设置位置" size="mini" class="width-100">
                </el-input-number>
              </div>
              <div class="flex-com mar-btm">
                <span class="label-title">左</span>
                <el-input-number v-model="s.position.left" placeholder="请设置位置" size="mini" class="width-100">
                </el-input-number>
              </div>
              <div class="flex-com mar-btm">
                <span class="label-title">宽</span>
                <el-input-number v-model="s.position.width" placeholder="请设置宽度" size="mini" class="width-100">
                </el-input-number>
              </div>
              <div class="flex-com mar-btm">
                <span class="label-title">高</span>
                <el-input-number v-model="s.position.height" placeholder="请设置高度" size="mini" class="width-100">
                </el-input-number>
              </div>

              <!--添加麦克风-->
              <el-tabs v-model="s.micId" :addable="true" @tab-remove="removeTabMic(idx, $event)"
                       @tab-add="addTabsMic(idx)">
                <el-tab-pane :key="mic.id" v-for="(mic, index) in s.mics" :label="mic.name" :name="mic.id"
                             :closable="index !== 0">
                  <div class="flex-com mar-btm">
                    <span class="label-title">名称</span>
                    <el-input v-model="mic.name" placeholder="麦克风名称" size="mini"></el-input>
                  </div>
                  <div class="flex-com mar-btm">
                    <span class="label-title">预设ID</span>
                    <el-input v-model="mic.presetNum" placeholder="预设ID" size="mini"></el-input>
                  </div>

                  <div class="flex-com mar-btm">
                    <span class="label-title">高度</span>
                    <el-input-number v-model="mic.tall" placeholder="麦克风安装高度" size="mini"
                                     class="width-100"></el-input-number>
                  </div>
                  <div class="flex-com mar-btm">
                    <span class="label-title">上</span>
                    <el-input-number v-model="mic.position.top" placeholder="请设置位置" size="mini" class="width-100">
                    </el-input-number>
                  </div>
                  <div class="flex-com mar-btm">
                    <span class="label-title">左</span>
                    <el-input-number v-model="mic.position.left" placeholder="请设置位置" size="mini" class="width-100">
                    </el-input-number>
                  </div>
                  <div class="flex-com mar-btm">
                    <span class="label-title">宽</span>
                    <el-input-number v-model="mic.position.width" placeholder="请设置宽度" size="mini" class="width-100">
                    </el-input-number>
                  </div>
                  <div class="flex-com mar-btm">
                    <span class="label-title">高</span>
                    <el-input-number v-model="mic.position.height" placeholder="请设置高度" size="mini" class="width-100">
                    </el-input-number>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import {assetBaseUrl} from '@/config/env';
  import ImagePicker from '@/components/IDE/ImagePicker';
  import {deepCopy, generateUID} from '@/utils';
  import {CameraTracking} from "@/modules/IDE/widget/custom/cameraTracking";
  import CustomColorPicker from '@/components/IDE/colorPicker/Color.vue';
  import PopoverColor from '@/components/IDE/colorPicker/Popovers.vue';

  export default {
    name: 'CameraTrackingSpec',
    components: {
      ImagePicker, CustomColorPicker, PopoverColor
    },
    props: {
      widget: {
        type: CameraTracking,
        default: () => {
          return {};
        }
      }
    },
    computed: {
      state() {
        return this.widget.getCurrentState();
      },
      dftImgSrc() {
        const {backgroundImage = ''} = this.widget.UI.data;
        if (!backgroundImage) return '';
        return `${assetBaseUrl}/file/download/${backgroundImage}`;
      }
    },
    data() {
      return {
        activeNames: [
          '1'
        ]
      }
    },
    methods: {
      handleTabsVideo(id, action) {
        let cameras = this.widget.UI.data.cameras
        if (action === 'add') {
          const lastState = deepCopy(cameras[cameras.length - 1]);
          lastState.position.left += 200
          // lastState.cameraNum=cameras.length+1
          lastState.mics.forEach((mic) => {
            mic.position.left += 200
          })
          // lastState.mics[0].position.left += 200
          const index = cameras.findIndex((s) => s.id === id);
          const camerasId = `cameras-${index}-${generateUID()}`;
          cameras.push({
            ...lastState,
            id: camerasId,
            name: `摄像头-${cameras.length}`,
          });
          this.widget.UI.data.camerasId = camerasId;
        }
        if (action === 'remove') {

          const state = cameras.find(s => s.id === id);
          this.$confirm(`是否要删除 ${state.name}`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const idx = cameras.findIndex((s) => s.id === id);
            if (~idx) {
              if (cameras[idx].id === this.widget.UI.data.camerasId) {
                this.widget.UI.data.camerasId = cameras[idx - 1].id;
              }
              cameras.splice(idx, 1);
            }
          }).catch(() => {
          });


        }
      },
      removeTabMic(idx, id) {
        let mic = this.widget.UI.data.cameras[idx].mics
        const state = mic.find(s => s.id === id);
        this.$confirm(`是否要删除 ${state.name}`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const micIdx = mic.findIndex((s) => s.id === id);
          if (~micIdx) {
            console.log(1222)
            if (mic[micIdx].id === this.widget.UI.data.cameras[idx].micId) {
              this.widget.UI.data.cameras[idx].micId = mic[micIdx - 1].id;
            }
            mic.splice(micIdx, 1);
          }
        }).catch(() => {
        });
      },
      addTabsMic(idx) {
        let micArr = this.widget.UI.data.cameras[idx].mics
        const lastMic = deepCopy(micArr[micArr.length - 1]);
        lastMic.position.top += 100
        // lastMic.presetNum=micArr.length+1
        const micId = `mic-${idx}-${generateUID()}`;
        micArr.push({
          ...lastMic,
          id: micId,
          name: `麦克风-${micArr.length}`,
        });
        this.widget.UI.data.cameras[idx].micId = micId;
      },
    }
  };
</script>

<style scoped lang="less">
  .flex-com {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .label-title {
    display: inline-block;
    min-width: 56px;
    color: @colorGray10;
    font-size: 14px;
    margin-right: 5px;
  }

  .divider {
    height: 2px;
    background: #eee;
    margin: 10px 0;
  }

  .align-start {
    align-items: flex-start;
  }

  .default-image-container {
    display: inline-block;
    cursor: pointer;

    .default-image-value {
      width: 60px;
      max-height: 60px;
    }
  }

</style>
